<template>
  <div id="tdtMapContainer" ref="mapContainer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const mapContainer = ref(null);
let map = null;

// 请替换为你的实际天地图密钥
const tdtKey = 'ca44e934031d3b685438b13772ffd128';

onMounted(() => {
  if (!mapContainer.value) return;

  // 初始化地图
  map = L.map(mapContainer.value, {
    center: [39.56, 116.20],
    zoom: 10,
    zoomControl: false,
    attributionControl: true
  });

  // 方案1：使用正确的子域名数组（推荐）
  const satelliteLayer = L.tileLayer('https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdtKey, {
    maxZoom: 18,
    minZoom: 3,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] // 正确的子域名配置
  });

  const annotationLayer = L.tileLayer('https://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + tdtKey, {
    maxZoom: 18,
    minZoom: 3,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
  });

  // 添加到地图
  satelliteLayer.addTo(map);
  annotationLayer.addTo(map);
  // 添加缩放控件
  L.control.zoom({ position: 'topleft' }).addTo(map);

  // 添加比例尺
  L.control.scale({ position: 'bottomleft' }).addTo(map);
});
</script>

<style scoped>
#tdtMapContainer {
  width: 100%;
  height: 100%;
}
</style>